<template>
    <a-layout style="min-height: calc(100vh - 64px - 70px);">
        <a-page-header style="padding: 0.8em 0px 0.8em 0px; background-color: transparent;" title="人物大全" sub-title="滚滚长江东逝水，浪花淘尽英雄"/>
        <a-layout style="background: #fff;">
            <a-layout-content style="padding: 1.5vw;">
                <!-- 人物卡片列表 -->
                <a-row :gutter="[8,8]">
                    <a-col v-for="personage in personageList" :xs="12" :sm="8" :lg="4">
                        <a-card :loading="personage.loading" class="card" @click="detail(personage)" hoverable>
                            <a-card-meta :title="personage.recordPersonageEntity?.lastName + personage.recordPersonageEntity?.firstName" :description="personage.recordPersonageEntity?.courtesyName ? '字 ' + personage.recordPersonageEntity?.courtesyName : ''">
                                <template #avatar>
                                    <a-avatar :src="personage.recordPersonageEntity?.avatar" :style="{width: scrollWidth() * cardProportion() * 0.32 + 'px', height: scrollWidth() * cardProportion() * 0.32 + 'px', 'max-width': '66px',  'max-height': '66px'}"/>
                                </template>
                            </a-card-meta>
                            <br>
                            <a-typography-paragraph style="height: 4.5rem; line-height: 1.5rem;" :ellipsis="{rows: 3, expandable: false}" :content="personage.recordPersonageEntity?.introduction"/>
                            <template #actions>
                                <span @click.stop>
                                    <span v-if="personage.like?.interactId">
                                        <a-tooltip title="取消喜欢">
                                            <LikeFilled @click="deletePersonageLike(personage)"/>
                                        </a-tooltip>
                                    </span>
                                    <span v-else>
                                        <a-tooltip title="喜欢">
                                            <LikeOutlined @click="insertPersonageLike(personage)"/>
                                        </a-tooltip>
                                    </span>
                                    <span style="padding-left: 8px; cursor: auto;">{{ personage.like?.amount ? personage.like.amount : '0' }}</span>
                                </span>
                                <span @click.stop>
                                    <span v-if="personage.dislike?.interactId">
                                        <a-tooltip title="取消厌恶">
                                            <DislikeFilled @click="deletePersonageDislike(personage)"/>
                                        </a-tooltip>
                                    </span>
                                    <span v-else>
                                        <a-tooltip title="厌恶">
                                            <DislikeOutlined @click="insertPersonageDislike(personage)"/>
                                        </a-tooltip>
                                    </span>
                                    <span style="padding-left: 8px; cursor: auto;">{{ personage.dislike?.amount ? personage.dislike.amount : '0' }}</span>
                                </span>
                                <span @click.stop>
                                    <a-tooltip title="评论">
                                        <CommentOutlined @click="comment(personage)"/>
                                    </a-tooltip>
                                </span>
                            </template>
                        </a-card>
                    </a-col>
                </a-row>
                <!-- 分页 -->
                <a-pagination v-if="scrollWidth() >= 800" :current="query.pageNum" :page-size="query.pageSize" showSizeChanger style="margin-top: 2vh; text-align: center;" :total="personageTotal" :show-total="(total, range) => `${range[0]}-${range[1]} of ${total} items`" @change="paginationChange"/>
                <a-pagination v-else :current="query.pageNum" :page-size="query.pageSize" style="margin-top: 2vh; text-align: center;" :total="personageTotal" simple @change="paginationChange"/>
            </a-layout-content>
        </a-layout>
    </a-layout>
</template>

<script>
    import {defineComponent, onMounted, reactive, toRefs} from 'vue';
    import {message, notification} from 'ant-design-vue';
    import {useRouter} from 'vue-router';
    import {useStore} from 'vuex'
    import {getPage} from '@/api/record/personage';
    import {insert as insertInteractPersonageView} from '@/api/interact/personage/view';

    export default defineComponent({
        setup() {
            const state = reactive({
                // 遮罩层
                loading: true,
                // 查询参数
                query: {
                    param: {},
                    pageNum: 1,
                    pageSize: 30,
                    sortField: 'CREATE_TIME',
                    sortOrder: 'ASC'
                },
                // 人物列表
                personageList: [],
                personageTotal: 0
            });
            // 定义组件
            const router = useRouter();
            const storage = useStore();
            // 页面宽度
            const scrollWidth = () => {
                return storage.state.system.clientWidth;
            };
            // 卡片占比基数（根据xs/sm/lg等反向计算）
            const cardProportion = () => {
                if (storage.state.system.clientWidth >= 992) {
                    return 1 / 6;
                } else if (storage.state.system.clientWidth >= 576) {
                    return 1 / 3;
                } else {
                    return 1 / 2;
                }
            };
            // 分页变化
            const paginationChange = (page, pageSize) => {
                // 更改查询条件
                state.query.pageNum = page;
                state.query.pageSize = pageSize;
                // 重载页面
                loadPage();
            };
            // 查询列表
            const loadPage = () => {
                // 打开加载
                state.loading = true;
                // 请求数据
                getPage(state.query).then(response => {
                    if (response.data.code == 200) {
                        // 获取真正返回结果
                        let data = response.data.data;
                        // 更新人物列表数据
                        state.personageList = data.list;
                        // 更新人物总条数
                        state.personageTotal = data.total;
                        // 关闭加载
                        state.loading = false;
                    } else {
                        // 提示失败
                        requestFailed(response.data);
                    }
                }).catch((error) => {
                    // 提示失败
                    requestFailed(error);
                });
            };
            // 重置
            const resetQuery = () => {
                // 重置查询条件
                state.query = {
                    param: {},
                    pageNum: 1,
                    pageSize: 30,
                    sortField: 'CREATE_TIME',
                    sortOrder: 'ASC'
                };
                // 查询列表
                loadPage();
            };
            // 添加人物喜欢
            const insertPersonageLike = (personage) => {
                message.warning('喜欢功能尚未实现');
            };
            // 删除人物喜欢
            const deletePersonageLike = (personage) => {
                message.warning('取消喜欢功能尚未实现');
            };
            // 添加人物厌恶
            const insertPersonageDislike = (personage) => {
                message.warning('厌恶功能尚未实现');
            };
            // 删除人物厌恶
            const deletePersonageDislike = (personage) => {
                message.warning('取消厌恶功能尚未实现');
            };
            // 评论
            const comment = (personage) => {
                message.warning('评论功能尚未实现');
            };
            // 详情
            const detail = (personage) => {
                // 添加浏览记录
                insertInteractPersonageView({personageId: personage.recordPersonageEntity?.id}).then(response => {
                    // 不判断结果
                }).catch((error) => {
                    // 不处理错误
                });
                // 打开新的页面
                let routeUrl = router.resolve({
                    path: '/record/personage/detail',
                    query: {id: personage.recordPersonageEntity?.id}
                });
                window.open(routeUrl.href, '_blank');
            };
            // 请求错误提示
            const requestFailed = (error) => {
                notification.error({
                    message: error.code || '-1',
                    description: error.msg || error.message || '请求出现错误，请稍后再试',
                    duration: 4
                });
            };

            // 加载页面
            onMounted(() => {
                resetQuery();
            });

            return {
                ...toRefs(state),
                scrollWidth,
                cardProportion,
                paginationChange,
                insertPersonageLike,
                deletePersonageLike,
                insertPersonageDislike,
                deletePersonageDislike,
                comment,
                detail
            };
        }
    });
</script>

<style scoped>
    .card :deep(.ant-card-body) {
        padding: 0.6em !important;
    }

    .card :deep(.ant-typography) {
        margin-bottom: 0.6em !important;
    }
</style>